<template>
    <div>
        
        <table class="table">
            <tbody class="table">
                <tr>
                    <td>门店名称</td>
                    <td>
                        <input type="text" v-model="can.name">
                    </td>
                </tr>
                <tr>
                    <td>服务范围</td>
                    <td>
                        <select v-model="can.seid">
                            <option :value="0">=请选择=</option>
                            <option v-for="e in showdata" :value="e.seid">{{e.sname}}</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <input type="button" value="查询" @click="tiao">
                        <input type="button" value="公告列表" @click="Reshow">
                        <input type="button" value="批量删除" @click="del">
                        <input type="button" value="批量变更状态" @click="upStatus">
                    </td>
                </tr>
            </tbody>
        </table>
        <table class="table">
            <thead class="table">
                <tr>
                    <td>
                        <input type="checkbox" v-model="sta" @change="Allsel">
                    </td>
                    <td>门店名称</td>
                    <td>营业开始时间</td>
                    <td>营业结束时间</td>
                    <td>服务范围</td>
                    <td>门店logo</td>
                    <td>门店照片</td>
                    <td>门店电话</td>
                    <td>门店地址</td>
                    <td>门店状态</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody class="table">
                <tr v-for="a in data">
                    <td>
                        <input type="checkbox" :value="a.sid" v-model="idstring" >
                    </td>
                    <td>{{a.shopName}}</td>
                    <td>{{moment(a.strTime).format("YYYY-MM-DD  HH:mm:ss")}}</td>
                    <td>{{moment(a.endTime).format("YYYY-MM-DD  HH:mm:ss")}}</td>
                    <td>{{a.sname}}</td>
                    <td><img :src="'https://localhost:7194'+a.logo" style="width: 60px;height: 60px;"></td>
                    <td><img :src="'https://localhost:7194'+a.shopLog" style="width: 60px;height: 60px;"></td>
                    <td>{{a.phone}}</td>
                    <td>{{a.address}}</td>
                    <td>{{a.isStatus?"启用":"禁用"}}</td>
                    <td>
                        <input type="button" value="编辑" @click="backdata(a.sid)">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <input type="button" value="首页" @click="skip(1)">
    <input type="button" value="上页" @click="skip(2)">
    <input type="button" value="下页" @click="skip(3)">
    <input type="button" value="尾页" @click="skip(4)">
    一共{{can.totalpage}}页，一共{{can.listcount}}条，每页{{can.pagesize}}条，当前{{can.pageindex}}页
    <select v-model="can.pagesize" @change="tiao">
        <option :value="2">2</option>
        <option :value="3">3</option>
        <option :value="4">4</option>
    </select>
    <input type="text" v-model="can.pageindex">
    <input type="button" value="跳转" @click="page">
</template>

<script setup lang="ts">
import axios from 'axios';
import { ref,onMounted } from 'vue';
import { useRouter } from 'vue-router';
import moment from 'moment';

onMounted(()=>{
    showss();
    show();
})
const showdata=ref([{
"seid": 1,
    "sname": ""
}])
const showss=()=>{
    axios.get("https://localhost:7194/api/Shop/GetServices").then(res=>{
        showdata.value=res.data;
    })
}
const can=ref({
    name:'',
    seid:0,
    pageindex:1,
    pagesize:2,
    listcount:0,
    totalpage:0
})

const data=ref([{
"sid": 1,
      "shopName": "",
      "strTime": "",
      "endTime": "",
      "seid": 1,
      "logo": "string",
      "shopLog": "",
      "phone": "",
      "address": "",
      "isStatus": true,
      "isDelete": true,
      "sname": ""
}])

const show=()=>{
    axios.get("https://localhost:7194/api/Shop/GetShow",{params:can.value}).then(res=>{
        data.value=res.data.row;
        can.value.listcount=res.data.count;
        can.value.totalpage=Math.ceil(res.data.count/can.value.pagesize);
    })
}
const Reshow=()=>{
    router.push({
        path:'/NoShowView'
    })
}

const router=useRouter();
//数据回显
const backdata=(s:number)=>{
    router.push({
        path:'/UpdateView',
        query:{id:s}
    })
}

const idstring=ref<number[]>([]);
const sta=ref(false);
//全选/全不选
const Allsel=()=>{
    if(sta.value){
        data.value.forEach(s=>{
            idstring.value.push(s.sid);
        })
    }else{
        idstring.value=[];
    }
}
//删除
const del=()=>{
    var s=idstring.value.toString();
    if(s.length==0){
        alert("至少选中一项")
        return;
    }
    if(confirm("确认删除吗？")){
        axios.delete("https://localhost:7194/api/Shop/DeleteShop",{params:{idstring:s}}).then(res=>{
            if(res.data>0){
                alert("删除成功");
                show();
            }else{
                alert("删除失败");
            }
        })
    }
}
//跳转
const tiao=()=>{
    can.value.pageindex=1;
    show();
}
//批量修改状态
const upStatus=()=>{
    var s=idstring.value.toString();
    if(s.length==0){
        alert("至少选中一项")
        return;
    }
    if(confirm("确认变更状态?")){
        axios.get("https://localhost:7194/api/Shop/UpdateShopStatus",{params:{idstring:s}}).then(res=>{
            if(res.data>0){
                alert("变更成功");
                show();
            }else{
                alert("变更失败");
            }
        })
    }
}
//翻页
const skip=(n:number)=>{
    if(n==1){
        can.value.pageindex=1;
        show();
    }
    if(n==2){
        if(can.value.pageindex>1){
            can.value.pagesize-=1;
            show();
        }else{
            alert("超出页码范围")
        }
    }
    if(n==3){
        if(can.value.pageindex<can.value.totalpage){
            can.value.pageindex+=1;
            show();
        }else{
            alert("超出页码范围")
        }
    }
    if(n==4){
        can.value.pageindex=can.value.totalpage;
        show();
    }
}

const page=()=>{
    if(can.value.pageindex>can.value.totalpage){
        alert("超出最大页吗，返回尾页");
        can.value.pageindex=can.value.totalpage;
        show();
    }
    if(can.value.pageindex*0!=0){
        alert("请输入数字");
        can.value.pageindex=1;
        show();
    }
    show();
}

</script>

<style scoped>

</style>